<template>
  <div>
    <div class="card" style="margin-bottom:18px " v-if="user.role === '管理员'">
      <el-input v-model="data.userId" style="width: 280px;margin-right: 10px" placeholder="请输入用户编号查询" :prefix-icon="Search"/>
      <el-input v-model="data.gameId" style="width: 280px;margin-right: 10px" placeholder="请输入赛事编号查询" :prefix-icon="Search"/>
      <el-button type="primary" plain style="margin-left: 10px"  @Click="load">查询</el-button>
      <el-button type="info" plain style="margin-left: 10px " @Click="reset">重置</el-button>
<!--      <el-button type="success" plain @Click="handeladd" v-if="user.role === '管理员'">新增</el-button>-->
    </div>
  </div>
  <div class="card " style="margin-bottom:18px;">
    <div>
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="id" type="index" label="序号" width="100" />
        <el-table-column prop="userId" label="用户编号" width="150"/>
        <el-table-column prop="gameId" label="赛事编号" />
        <el-table-column prop="tickets1" label="贵宾票数量"  />
        <el-table-column prop="tickets2" label="标准票数量"  />
        <el-table-column prop="tickets3" label="低价票数量"  />
        <el-table-column prop="totalCost" label="总价"  />
        <el-table-column prop="ticketBuyTime" label="购票时间"  />
<!--        <el-table-column label="操作" width="180" v-if="user.role === '管理员'">-->
<!--          <template #default="scope">-->
<!--            <el-button type="primary" plain  @Click="handeledit(scope.row)">编辑</el-button>-->
<!--            <el-button type="danger" plain @Click="del(scope.row.id)">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>
  </div>
  <div class="card">
      <el-pagination v-model:page-size="data.pageSize" v-model:current-page="data.pageNum"
                     @current-change="handelCurrentChange"
                     background layout="prev, pager, next" :total="data.total" />
  </div>
  <el-dialog  width="35%" v-model="data.formVisible" title="体育场馆信息" destroy-on-close>
    <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right" style="padding-right: 40px" >
      <el-form-item  prop="gymId" label="比赛场馆id" >
        <el-input v-model="data.form.gymId" autocomplete="off" placeholder="统一为90xx" />
      </el-form-item>
      <el-form-item prop="name" label="场馆名称" >
        <el-input  v-model="data.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地理位置" >
        <el-input v-model="data.form.location" autocomplete="off" />
      </el-form-item>
      <el-form-item label="贵宾座位数量" >
        <el-input v-model="data.form.siteNumber1" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="标准座位数量" >
        <el-input v-model="data.form.siteNumber2" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="低价座位数量" >
        <el-input v-model="data.form.siteNumber3" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
    <div class="dialog-footer">
      <el-button @click="data.formVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
</template>
  </el-dialog>

</template>
<script setup>
import {reactive,ref} from "vue";
  import { Search } from '@element-plus/icons-vue'
  import request from "@/utils/request";
  import {ElMessage, ElMessageBox} from "element-plus";
  const user = JSON.parse(localStorage.getItem('student-user')||'{}')
  const baseurl='/ticket'

  const  data =reactive({
  userId:"",
  gameId:"",
  total:0,
  tableData:[],
  pageNum: 1,//当前页数
  pageSize:10,//每一页的个数
  formVisible:false,
  form:{}
})

  const load=() =>{
    request.get(baseurl +"/selectPageTickets",{
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        gameId: data.gameId,
        userId: data.userId,
        userRole: user.role,
        userYonghuId: user.id

      }
    }).then(res=>{
    data.tableData = res.data?.list || []
      data.total = res.data.total || 0
    })
  }

  //调用方法获取数据
  load();

  const handelCurrentChange = () => {
  //翻页后重新加载数据页面
  load()
}

  const reset =()=>{
      data.gameId = ""
      data.userId = ""
      load()
  }



  // const del =(id)=>{
  //   ElMessageBox.confirm('删除数据后无法回复，您确认删除吗？','删除确认',{type:'warning'}).then(res=> {
  //         request.delete(baseurl + '/delete/' + id).then(res => {
  //           if (res.code === '200') {
  //             load()
  //             ElMessage.success("删除成功")
  //           } else {
  //             ElMessage.error(res.msg)
  //           }
  //         })
  //       }) .catch(res => {})
  // }

//表单校验
const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

const formRef = ref()

const handeladd =()=>{
  data.form= { }
  data.formVisible=true
}


const handeledit =(row)=>{
  data.form=JSON.parse(JSON.stringify(row))
  data.formVisible=true;
}

  //保存数据到后台
const save =()=>{
    formRef.value.validate((valid) => {
      if(valid){
        request.request( {
          url:data.form.id ? baseurl + '/update': baseurl + '/add',
          method:data.form.id ? 'PUT' : 'POST',
          data:data.form
        }).then(res => {
          if (res.code ==='200'){
            load()
            data.formVisible = false //弹窗关闭
            ElMessage.success("操作成功")
          }else{
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }
const handleImgUploadSuccess =(res=>{
  data.form.avatar=res.data

})

</script>